• 0

Change link href on dropdown select option using jquery


Question

I need some help. I am trying to change a link attribute href on dropdown select. Link changes depending on the value of the option the user has selected.

I have used this page to help start me off: http://api.jquery.com/val/

I have adapted it to how I need it to work for me but something is missing and I don't know what it is to get it to work.

This is what I have written so far.

jQuery(document).ready(function($){
	function changeLang(){
		var link = $('#changelang').val();
		if(link == ''){ // if the option value is empty, hide link.
			$('#changelink').css('display', 'none');
		}
		else{
			$('#changelink').css('display', 'block'); // Display link after dropdown.
			$('#changelink').attr('href', 'readtext.php?lang=' + link); // Change the link
			alert('Language changed!'); // Alert user the language of the text has changed.
		}
	}
	$('#changelang').change(changeLang); // Loads the function again on change.
	changeLang(); // Loads function on page load.
});

This is my html code.

<select id="changelang">
<option value="" selected="selected">-------</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
<option value="jp">Japanese</option>
</select>
<a id="changelink" href="readtext.php">Read</a>

If a user selects a different language then the link will change. What I do with that link afterwards is up to me.

I would like some help to get it working and any would be most appreciated.

Thank you!

4 answers to this question

Recommended Posts

  • 0

I think you could also use plain old Javascript for that line using

document.getElementById("changelink").href = 'readtext.php?lang=' + link

instead of

$('#changelink').attr('href', 'readtext.php?lang=' + link''); // Change the link

Though the original code seems OK...

Also, why do you have ' ' after link?

  • 0

You don't even need JavaScript to do this, just use good old HTML forms!

<form action="readtext.php" method="get">
    <select id="lang" name="lang">
        <option value="" selected="selected">- Language -</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="jp">Japanese</option>
    </select>
    <input type="submit" value="Read Text" />
</form>

Then you can build upon that, for example by using CSS to style the submit button or by using JavaScript/jQuery to handle the submit event through AJAX. However what truly matters is that this will work in any browser, with or without JavaScript.

  • 0
  On 19/07/2010 at 08:56, Calculator said:

You don't even need JavaScript to do this, just use good old HTML forms!

<form action="readtext.php" method="get">
    <select id="lang" name="lang">
        <option value="" selected="selected">- Language -</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="jp">Japanese</option>
    </select>
    <input type="submit" value="Read Text" />
</form>

Then you can build upon that, for example by using CSS to style the submit button or by using JavaScript/jQuery to handle the submit event through AJAX. However what truly matters is that this will work in any browser, with or without JavaScript.

I don't want just good old HTML forms. I know how I want my code to react, I just need my jquery function to work for what I need it to do.

If a user selects a different language then the link will change. The user will then be able to click on the link and what ever function i do with that after is up to me. Don't change the function to basic form submission. That's not what I asked for.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Explzh 9.81 by Razvan Serea Explzh is a free Windows archive manager for creating, extracting and managing archives. The program supports many different types of archives, including zip, 7z, rar, tar, ace, lzh, arj, cab, iso, img, msi, sfx and more. Apart from archive creation and extraction, you will also be able to verify compressed data for errors, initiate repair routines, split data into multiple items, and more. It additionally allows you to password protect your data and attach digital signatures to files. Key features of Explzh: Explorer-like GUI and operability. LHA, ZIP (ZIPX), JAR, CAB, RAR, TAR, TAR.XXX, 7z, ARJ, WIM, CHM, PE, HFS, NSIS Format Installer, ISO, InstallShield, MSI, and several other formats... Support for more archive formats by introducing the integrated archiver DLL. Self-extracting archive creation function that can create high-performance automatic installers. Digital signature addition function to created self-extracting archive. Office 2007 or later document compression / image optimization re-archiving function. Supports compression and decompression of Unicode file names. Supports compression and expansion exceeding 4GB. AES encryption function. You can create a robust secure ZIP encryption archive. Thumbnail function of image file. In-library file search function. . Equipped with archive file conversion function. File split function. The split file has a self-consolidation function, and can concatenate files larger than 4GB. (No need for batch file or connection software) UU (XX) Encode, Base64 decode function. FTP upload function Supports Windows 11 shell integration extended context menu. Explzh 9.81 changelog: Improved to send update notifications to the shell when making changes such as additional compression to existing zip and 7-zip files. This also updates the Explorer view of the open file in real time. (If the drop target feature is enabled, you can easily create an encrypted ZIP by dragging and dropping onto the ZIP icon while holding down the Ctrl key.) When the zip drop target setting is enabled, the "Compressed (zipped) Folder" item will be added to the "New" shell context menu if it does not already exist. Password manager bug fix: Fixed a bug that caused the app to crash when reading password.dat (password data) when changing authentication method. Updated to Visual Studio 2022 v.17.14.9. Download: Explzh 64-bit | Explzh 32-bit | ~6.0 MB (Freeware) Download: Explzh ARM64 | 5.9 MB View: Explzh Home Page | Screenshot | Themes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Have to get that indoctrination in early I guess
    • The reason why I'm using as much portable software as possible.
    • Personally, I used to be a big fan of the Evo drives but have found the Corsair MP 700 is just a bit faster and seems to fit my needs just as well. 
  • Recent Achievements

    • One Month Later
      Johnny Mrkvička earned a badge
      One Month Later
    • Week One Done
      Sender88 earned a badge
      Week One Done
    • Dedicated
      Daniel Pinto earned a badge
      Dedicated
    • Explorer
      DougQuaid went up a rank
      Explorer
    • One Month Later
      MIghty Haul earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      605
    2. 2
      Michael Scrip
      200
    3. 3
      ATLien_0
      191
    4. 4
      +FloatingFatMan
      138
    5. 5
      Xenon
      127
  • Tell a friend

    Love Neowin? Tell a friend!